import React from 'react';
import { Icon } from '@/components';
import { Header } from '@/layouts/children';
import { message } from 'antd';
import { useHistory } from 'react-router-dom'
import styles from './index.module.scss';

const Workbench: React.FC = () => {
  const history = useHistory();

  type IMenuChild = {
    title: string;
    icon: string;
    path?: string;
  };

  type IMenu = {
    title: string;
    key: string | number;
    children: IMenuChild[]
  }

  const menus: IMenu[] = [{
    title: '角色管理',
    key: 1,
    children: [{
      title: '角色管理',
      icon: 'jiaoseguanli',
    }, {
      title: '权限管理',
      icon: 'quanxianshezhi',
    }, {
      title: '学校信息',
      icon: 'xuexiaoxinxi',
    }, {
      title: '班级信息',
      icon: 'banjixinxi',
      path: '/basic-app/class-info',
    }, {
      title: '教职工信息',
      icon: 'jiaozhigongxinxi',
      path: '/basic-app/faculty-info'
    }, {
      title: '学生信息',
      icon: 'xueshengxinxi',
      path: '/basic-app/student-info',
    }, {
      title: '开放平台',
      icon: 'kaifangpingtai',
    }]
  }, {
    title: '教务管理',
    key: 2,
    children: [{
      title: '信息发送',
      icon: 'xinxifasong',
    }, {
      title: '考试管理',
      icon: 'kaoshiguanli',
    }, {
      title: '错题分析',
      icon: 'cuotifenxi',
    }, {
      title: '在线教研',
      icon: 'zaixianjiaoyan',
    }, {
      title: '教学评比',
      icon: 'jiaoxuepingbi',
    }, {
      title: '校园选课',
      icon: 'xiaoyuanxuanke',
    }, {
      title: '问卷调查',
      icon: 'wenjuantiaocha',
    }, {
      title: '校园课表',
      icon: 'xiaoyuankebiao',
    }]
  }, {
    title: '校园安全',
    key: 3,
    children: [{
      title: '校园监控',
      icon: 'xiaoyuanjiankong',
      path: '/campus-security/monitor/list',
    }, {
      title: '学生请假',
      icon: 'xueshengqingjia1',
    }, {
      title: '出门条',
      icon: 'chumentiao',
    }, {
      title: '电子访客',
      icon: 'dianzifangke',
    }, {
      title: '进出记录',
      icon: 'jinchujilu',
    }, {
      title: '学生考勤',
      icon: 'xueshengkaoqin',
    }]
  }, {
    title: '硬件监控',
    key: 4,
    children: [{
      title: '校园监控',
      icon: 'xiaoyuanjiankong',
    }, {
      title: '电子班牌',
      icon: 'dianzibanpai',
    }, {
      title: '智慧黑板',
      icon: 'zhihuiheiban',
    }, {
      title: '闸机通道',
      icon: 'zhajitongdao',
    }]
  }]

  const handleToPage = (item: IMenuChild) => {
    if (!item.path) {
      return message.warning('该功能正在建设中！')
    }
    history.push(item.path)
  }

  return (
    <>
      <Header darkly={false} />
      <div className={styles['menu-box__wrap']}>
        {
          menus.map(item =>
            <div className={styles['menu-box']} key={item.key}>
              <div className={styles['title']}>{item.title}</div>
              <ul className={styles['menus-wrap']}>
                {
                  item.children.map((item, index) =>
                    <li key={index} onClick={() => handleToPage(item)}>
                      {<Icon type={`icon-${item.icon}`} className="icon" style={{ fontSize: '120px' }} />}
                      <span className={styles['text']}>{item.title}</span>
                    </li>
                  )
                }
              </ul>
            </div>
          )
        }
      </div>
    </>
  )
}

export default Workbench
